<!--
 Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
 for details. All rights reserved. Use of this source code is governed by a
 BSD-style license that can be found in the LICENSE file.
-->
<section class="metadata">
  <div class="references" *ngIf="model.relatedUrls.isNotEmpty">
    <span>References:</span>
    <ng-container *ngFor="let name of model.relatedUrls.keys; let last = last">
      <a class="related-url" [href]="model.relatedUrls[name]" target="_blank">
        {{name}}
      </a>
      <span *ngIf="!last">&#8226;&nbsp;</span>
    </ng-container>
  </div>

  <div *ngIf="model.owners.isNotEmpty">
    <span>Owners:</span>
    <ng-container *ngFor="let ldap of model.owners; let last = last">
      <a class="owner" [href]="getTeamsLink(ldap)" target="_blank">
        {{ldap}}@
      </a>
      <span *ngIf="!last">&#8226;&nbsp;</span>
    </ng-container>
  </div>

  <div *ngIf="model.uxOwners.isNotEmpty">
    <span>UX:</span>
    <ng-container *ngFor="let ldap of model.uxOwners; let last = last">
      <a class="ux-owner" [href]="getTeamsLink(ldap)" target="_blank">
        {{ldap}}@
      </a>
      <span *ngIf="!last">&#8226;&nbsp;</span>
    </ng-container>
  </div>
</section>

<section class="toc" *ngIf="showToc">
  <ng-container *ngIf="model.docs.isNotEmpty">
    <label>Dart Docs</label>
    <a *ngFor="let doc of model.docs"
       buttonDecorator
       (trigger)="scroll('#' + getDocId(doc))">
      {{doc.name}}
    </a>
  </ng-container>

  <ng-container *ngIf="model.demos.isNotEmpty">
    <label>Demos</label>
    <a *ngFor="let demo of model.demos"
       buttonDecorator
       (trigger)="scroll('#' + getDemoId(demo))">
      {{demo.name}}
    </a>
  </ng-container>

  <ng-container *ngIf="model.benchmarks.isNotEmpty">
    <label>Latency</label>
    <a buttonDecorator (trigger)="scroll('#latency')">Latency Charts</a>
  </ng-container>
</section>

<section *ngFor="let doc of model.docs" class="doc">
  <h2 [id]="getDocId(doc)">
    {{doc.name}}
    <a [href]="getCodeSearchLink(doc.path)" target="_blank">Source Code</a>
  </h2>

  <p *ngIf="doc.selector.isNotEmpty">
    <strong>Selector:</strong>
    <code>&lt;{{doc.selector}}&gt;</code>
  </p>

  <p *ngIf="doc.exportAs.isNotEmpty">
    <strong>Exported as:</strong>
    <code>{{doc.exportAs}}</code>
  </p>

  <div [safeInnerHtml]="getSafeHtml(doc.comment)"></div>

  <ng-container *ngIf="model.showGeneratedDocs">
    <div *ngIf="doc.inputs.isNotEmpty">
      <strong>Inputs:</strong>
      <ul class="property-list">
        <li *ngFor="let input of doc.inputs">
          <code class="property-name">
            {{input.bindingAlias.isNotEmpty ? input.bindingAlias : input.name}}
          </code>
          <code class="property-type">{{input.type}}</code>

          <p class="property-deprecated" *ngIf="input.deprecated">
            {{input.deprecatedMessage}}
          </p>
          <p *ngIf="input.comment.isEmpty && !input.deprecated">
            Missing a Dart Doc comment. Please update:
            <a [href]="getCodeSearchLink(input.classPath)" target="_blank">
              {{input.classPath}}
            </a>
          </p>
          <div [safeInnerHtml]="getSafeHtml(input.comment)"></div>
        </li>
      </ul>
    </div>

    <div *ngIf="doc.outputs.isNotEmpty">
      <strong>Outputs:</strong>
      <ul class="property-list">
        <li *ngFor="let output of doc.outputs">
          <code class="property-name">
            {{output.bindingAlias.isNotEmpty ? output.bindingAlias : output.name}}
          </code>
          <code class="property-type">{{output.type}}</code>
          <p class="property-deprecated" *ngIf="output.deprecated">
            {{output.deprecatedMessage}}
          </p>
          <p *ngIf="output.comment.isEmpty && !output.deprecated">
            Missing a Dart Doc comment. Please update:
            <a [href]="getCodeSearchLink(output.classPath)" target="_blank">
              {{output.classPath}}
            </a>
          </p>
          <div [safeInnerHtml]="getSafeHtml(output.comment)"></div>
        </li>
      </ul>
    </div>
  </ng-container>
</section>

<section *ngFor="let demo of model.demos" class="demo">
  <h2 [id]="getDemoId(demo)">
    {{demo.name}}
    <a [href]="getCodeSearchLink(demo.path)" target="_blank">Source Code</a>
  </h2>
  <dynamic-component [componentFactory]="demo.demoFactory"></dynamic-component>
</section>

<section *ngIf="model.benchmarks.isNotEmpty" class="latency-chart">
  <h2 id="latency">Latency Charts</h2>
  <latency-chart *ngFor="let url of model.benchmarks" linkUrl="{{url}}">
  </latency-chart>
</section>
